<template>
  <div class="box">
    <div class="back">
      <div class="background"></div>
    </div>
    <div class="top">
      <p>“团餐”膳食饮食</p>
    </div>
    <div class="overlap-one"></div>
    <div class="overlap-two"></div>
    <div class="overlap-three"></div>
    <div class="message">
      <div class="img" @click="img_btn()">
        <img src="../../../../static/img2/01.png" alt="" />
      </div>
      <p class="name">山东教育</p>
      <p class="lassname">
        PMGordon团餐 <span style="color: red; font-weight: bold">♀</span>
      </p>
      <ul class="biao">
        <li>
          <span style="font-weight: bold">1252</span
          ><span style="color: #aaa; font-size: 12px" @click="jifen_btn()"
            >积分</span
          >
        </li>
        <li style="line-height: 40px; color: #aaa">|</li>
        <li>
          <span style="font-weight: bold">9000</span
          ><span style="color: #aaa; font-size: 12px" @click="money_btn()"
            >零钱</span
          >
        </li>
        <li style="line-height: 40px; color: #aaa">|</li>
        <li @click="sccs()">
          <span style="font-weight: bold">52</span
          ><span style="color: #aaa; font-size: 12px">收藏</span>
        </li>
      </ul>
    </div>
    <div class="food">
      <p>膳食饮食</p>
      <ul class="biao">
        <li @click="djd()">
          <span style="display: inline-block; width: 50px; font-weight: bold"
            >1</span
          ><span
            style="
              display: inline-block;
              width: 50px;
              color: #aaa;
              font-size: 12px;
            "
            >厨师预约</span
          >
        </li>
        <li>
          <span style="display: inline-block; width: 50px; font-weight: bold"
            @click="yysc" >2</span
          ><span
            style="
              display: inline-block;
              width: 50px;
              color: #aaa;
              font-size: 12px;
            "
            >预约试吃</span
          >
        </li>
        <li>
          <span style="display: inline-block; width: 50px; font-weight: bold"
            @click="tcdz" >2</span
          ><span
            style="
              display: inline-block;
              width: 50px;
              color: #aaa;
              font-size: 12px;
            "
            >活动配餐</span
          >
        </li>
        <li>
          <span style="display: inline-block; width: 50px; font-weight: bold"
            >3</span
          ><span
            style="
              display: inline-block;
              width: 50px;
              color: #aaa;
              font-size: 12px;
            "
            >固定团餐</span
          >
        </li>
      </ul>
    </div>
    <div class="advertising">
      <img src="../../../../static/img2/02.jpg" alt="" />
    </div>
    <div class="community" @click="settled()">
      <img src="../../../../static/img2/03.jpg" alt="" />
      <p>社区入住</p>
      <span>认证完成后可在本社区订餐中受益</span>
      <span style="float: right; margin-right: 15px; margin-top: -15px">></span>
    </div>
    <div class="serve">
      <p>服务工具</p>
      <ul>
        <li>
          <i class="iconfont icon-xinbaniconshangchuan-"></i>
          <span>客服中心</span>
        </li>
        <li><i class="iconfont icon-gongjuxiang"></i> <span>关于我们</span></li>
        <li>
          <i class="iconfont icon-experiment"></i> <span>功能实验室</span>
        </li>
        <li><i class="iconfont icon-guanyuwomen"></i> <span>社区活动</span></li>
        <li><i class="iconfont icon-book"></i> <span>平台规划</span></li>
        <li>
          <i class="iconfont icon-renyuan-tianjia"></i> <span>收货地址</span>
        </li>
      </ul>
    </div>
    <div class="di"></div>
  </div>
</template>

<script>
import icon from "../../../assets/fonts3/./iconfont.css";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    edit_btn() {
      this.$router.push("/edit");
    },
    jifen_btn() {
      this.$router.push("/points");
    },
    money_btn() {
      this.$router.push("/myMoney");
    },
    tcdz(){
      this.$router.push("/tcdz");
    },
    yysc(){
      this.$router.push("/yysc");
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
}
.back {
  width: 100%;
  height: 200px;
  background-color: skyblue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  float: left;
}
.background {
  width: 100%;
  height: 80px;
  background-color: skyblue;
  position: absolute;
  border-radius: 50%;
  top: 160px;
  left: 0;
  z-index: -100;
  float: left;
}
.top {
  width: 100%;
  height: 30px;
}
.top p {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
}
.overlap-one {
  width: 300px;
  height: 150px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  margin: 0 auto;
  z-index: -80;
  margin-top: 50px;
}
.overlap-two {
  width: 320px;
  height: 150px;
  background: rgba(255, 254, 254, 0.6);
  border-radius: 20px;
  margin: 0 auto;
  z-index: -60;
  margin-top: -140px;
}
.overlap-three {
  width: 340px;
  height: 150px;
  background-color: #fff;
  border-radius: 20px;
  margin: 0 auto;
  z-index: -40;
  margin-top: -135px;
  box-shadow: 0 0 5px 1px rgb(138, 130, 189);
}
.message {
  width: 100%;
  height: 185px;
  float: left;
  margin-top: -200px;
}
.message .img {
  width: 75px;
  height: 75px;
  margin: 0 auto;
  box-shadow: 0 0 5px 1px red;
}
.message img {
  width: 75px;
  height: 75px;
}
@keyframes wrapper-gradient {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0%);
  }
}

.gradient-wrapper {
  animation: wrapper-gradient 2s linear;
}

.message p {
  text-align: center;
}
.name {
  width: 90px;
  height: 20px;
  margin: 0 auto;
  margin-top: 5px;
  line-height: 20px;
  color: #fff;
  border-radius: 15px;
  background-color: skyblue;
  font-size: 13px;
  animation: name 2s linear;
}
@keyframes name {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.lassname {
  font-weight: bold;
  font-size: 15px;
}
.biao {
  width: 270px;
  margin: auto;
}
.message ul li {
  list-style: none;
  float: left;
  width: 30px;
  height: 40px;
  margin: 10px;
  text-align: center;
}
.food {
  width: 95%;
  height: 130px;
  margin: auto;
  margin-top: 20px;
  border-radius: 20px;
  box-shadow: 0 0 5px 1px rgb(138, 130, 189);
}
.food p {
  margin: 10px;
  font-weight: bold;
  line-height: 50px;
}
.food .biao {
  width: 340px;
}
.food ul li {
  list-style: none;
  float: left;
  width: 45px;
  height: 40px;
  margin-left: 30px;
  text-align: center;
}
.food ul li span {
  margin-bottom: 10px;
}
.advertising {
  width: 100%;
  height: 70px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.advertising img {
  width: 100%;
  height: 70px;
}
@keyframes advertising {
  60% {
    transform: rotateX(180deg);
  }
}
.advertising {
  animation: advertising 2s linear;
  animation-iteration-count: 1;
}
.community {
  width: 95%;
  height: 70px;
  margin: auto;
  margin-top: 20px;
  border-radius: 20px;
  box-shadow: 0 0 5px 1px rgb(138, 130, 189);
}
.community img {
  float: left;
  margin: 20px;
}
.community p {
  float: left;
  width: 200px;
  font-size: 15px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
}
.community span {
  float: left;
  color: #aaa;
  font-size: 14px;
}
.serve {
  width: 95%;
  height: 200px;
  margin: auto;
  margin-top: 20px;
  border-radius: 20px;
  box-shadow: 0 0 5px 1px rgb(138, 130, 189);
}
.serve p {
  margin: 10px;
  font-weight: bold;
  line-height: 40px;
}
.serve ul li {
  width: 60px;
  list-style: none;
  float: left;
  font-size: 12px;
  margin-top: 15px;
  margin-left: 30px;
  text-align: center;
}
.serve ul li i {
  text-align: center;
  font-size: 25px;
}
.serve ul li span {
  display: inline-block;
  text-align: center;
  margin-top: 5px;
}
.di {
  width: 100%;
  height: 30px;
  margin-top: 30px;
}
</style>